import React from 'react';
import { useEditor, EditorContent } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import { Card, Typography, Button, Space } from 'antd';

const { Title, Paragraph } = Typography;

const TiptapPage: React.FC = () => {
  const editor = useEditor({
    extensions: [
      StarterKit,
    ],
    content: '<p>这是 Tiptap 编辑器的初始内容。</p>',
  });

  const handleGetContent = () => {
    if (editor) {
      console.log(editor.getHTML());
    }
  };

  if (!editor) {
    return null;
  }

  return (
    <div style={{ padding: '24px' }}>
      <Card>
        <Title level={2}>Tiptap 富文本编辑器</Title>
        <Paragraph>
          Tiptap 是一个基于 ProseMirror 的现代富文本编辑器，具有高度的可定制性和扩展性。
        </Paragraph>
        
        <div style={{ marginTop: '20px' }}>
          <Space style={{ marginBottom: '16px' }}>
            <Button
              onClick={() => editor.chain().focus().toggleBold().run()}
              type={editor.isActive('bold') ? 'primary' : 'default'}
            >
              粗体
            </Button>
            <Button
              onClick={() => editor.chain().focus().toggleItalic().run()}
              type={editor.isActive('italic') ? 'primary' : 'default'}
            >
              斜体
            </Button>
            <Button
              onClick={() => editor.chain().focus().toggleStrike().run()}
              type={editor.isActive('strike') ? 'primary' : 'default'}
            >
              删除线
            </Button>
          </Space>
          
          <div style={{ border: '1px solid #d9d9d9', borderRadius: '6px', padding: '12px', minHeight: '200px' }}>
            <EditorContent editor={editor} />
          </div>
        </div>
        
        <div style={{ marginTop: '20px' }}>
          <Button onClick={handleGetContent}>获取内容</Button>
        </div>
      </Card>
    </div>
  );
};

export default TiptapPage;